<template>
  <div class="contain">
    <el-card>
      <div class="top">
        <el-button type="primary" @click="showDialog=true">添加分类</el-button>
        <el-input
          v-model="title_contains"
          placeholder="请输入标题"
          class="input-with-select"
          @keyup.enter.native="searchFn"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchFn" />
        </el-input>
      </div>

      <el-table :data="CategoriesList" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="180">
          <template v-slot="{ row }">
            <el-image :src="row.image" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column prop="address" label="操作" width="180">
          <template v-slot="{row}">
            <el-button type="primary" @click="editCategories(row.id)">编辑</el-button>
            <el-button type="danger" @click="delCategories(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="params._limit"
        @current-change="currentChange"
      />
    </el-card>

    <addDialog ref="addDialog" :show-dialog.sync="showDialog" @getCategoriesList="getCategoriesList" />
  </div>
</template>

<script>
import { getCategoriesList, delCategories, getCategoriesCount } from '@/api/classification'
import addDialog from './component/addDialog.vue'
export default {

  components: {
    addDialog
  },
  data() {
    return {
      CategoriesList: [],
      params: {
        _limit: 3,
        _start: 0
      },
      title_contains: '',
      showDialog: false,
      total: 0,
      currentPage: 1
    }
  },
  created() {
    this.getCategoriesList()
    this.getCategoriesCount()
  },
  methods: {
    async getCategoriesCount() {
      if (this.title_contains) {
        const { data } = await getCategoriesCount({ title_contains: this.title_contains })
        this.total = data
      } else {
        const { data } = await getCategoriesCount()
        this.total = data
      }
    },
    async getCategoriesList(type) {
      // 如果新增时，跳到最后一页
      if (type === 'add') {
        await this.getCategoriesCount()
        const pageCount = parseInt(this.total / this.params._limit)
        this.currentChange(pageCount + 1)
      } else {
        const { data } = await getCategoriesList(this.params)
        this.CategoriesList = data
      }
    },
    searchFn() {
      this.params = {
        ...this.params,
        title_contains: this.title_contains
      }
      this.getCategoriesList()
    },
    async delCategories(id) {
      await this.$confirm('确定删除')
      await delCategories(id)
      this.$message.success('操作成功')
      // 判断是否最后一页是否还有数据
      await this.getCategoriesCount()
      if (this.total >= this.params._limit && this.total % this.params._limit === 0) {
        this.currentChange(this.currentPage - 1)
      }
      this.getCategoriesList()
    },
    editCategories(id) {
      this.showDialog = true
      this.$refs.addDialog.getCategories(id)
    },
    async currentChange(index) {
      this.params._start = this.params._limit * (index - 1)
      await this.getCategoriesList()
      this.currentPage = index
      await this.getCategoriesCount()
    }
  }
}
</script>

<style lang="scss">
.contain {
  padding: 10px;
  .top {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .input-with-select {
      width: 500px;
    }
  }
}
</style>>
